<template>
  <div id="realtimeVideo">
    <p>实现实时视频预览，抓拍，录像并下载</p>
    <el-switch
      v-model="rgbSwitch"
      class="switchStyle"
      active-text="Yes"
      inactive-text="NO"
      @change="changeStatus($event)"
    />
    <div class="pic-picture">
      <i class="el-icon-picture" size="medium" @click="capture" />
    </div>
    <div class="pic-camera">
      <i class="el-icon-video-camera-solid" size="medium" @click="videotape" />
    </div>
    <input id="suuid" type="hidden" name="suuid" :value="suuid">
    <input id="port" type="hidden" name="port" :value="port">
    <input
      id="localSessionDescription"
      ref="localSessionDescription"
      type="hidden"
      readonly="true"
    >
    <input
      id="remoteSessionDescription"
      ref="remoteSessionDescription"
      type="hidden"
      readonly="true"
    >
    <div id="remoteVideos" />
  </div>
</template>

<script>
import './Mixin/adapter-latest.js';
import { initVideo, closeVideo } from './Mixin/app.js';
import videotape from './Mixin/videotape';
export default{
  mixins:[
    videotape
  ],
  data() {
    return {
      suuid: 'demo1',
      port: 8083,
      rgbSwitch: false
    };
  },
  methods:{
    changeStatus(val) {
      console.log(val);
      if (val) {
        initVideo();
      } else {
        closeVideo();
      }
    }
  }
}
</script>

<style>
</style>
